<template>
  <view>
    <view class="cinema-top">
      <uni-icons
        type="left"
        size="30"
        @click="goBack()"
        style="margin-right: 20rpx"
      ></uni-icons>
      <view class="tops-item">
        <view class="cinema-img">
          <image :src="filmInfo.image"></image>
        </view>
        <view class="cinema-info">
          <view class="cinema-info-top">
            <view class="top-name">{{ filmInfo.filmName }}</view>
            <view class="top-type">{{ filmInfo.versionType }}</view>
          </view>
          <view class="rate-item">
            <u-rate
              :count="5"
              :disabled="true"
              v-model="filmInfo.grade"
              inactive-color="#ffffff"
              active-color="#FF6E06"
              :size="30"
            ></u-rate>
            <text class="rate-nun">{{ filmInfo.grade }}</text>
          </view>
          <view class="list-type"
            >{{ filmInfo.filmType }} | {{ filmInfo.duration }}分钟</view
          >
          <view class="list-type">{{ filmInfo.publishTime }} 上映</view>
          <!-- <view class="list-type"><text>{{filmInfo.like}}</text>人想看</view> -->
        </view>
      </view>
    </view>

    <view class="cinema-down">
      <view class="down-city" @click="select_city()">
        <text>{{ position.city || "请选择城市" }}</text>
        <image src="https://picture-1326598115.cos.ap-nanjing.myqcloud.com/2025/09/24db001ebcaa394dc6a823f9393c74646bmovie-xiala.png"></image>
      </view>
      <view class="down-city" style="margin-left: 80rpx">
        <uni-data-select
          v-model="countyId"
          :localdata="countyList"
          @change="changeCounty"
        ></uni-data-select>
        <!-- <text>全城</text>
				<image src="https://picture-1326598115.cos.ap-nanjing.myqcloud.com/2025/09/24db001ebcaa394dc6a823f9393c74646bmovie-xiala.png"></image> -->
      </view>
    </view>

    <view
      class="cinema-list"
      v-for="(value, index) in dataList"
      :key="index"
      @click="getDataUrl(value)"
    >
      <view class="cinema-name">{{ value.cinemaName }}</view>
      <view class="cinema-address-item">
        <view class="address-text">{{ value.cinemaAddress }}</view>
      </view>
    </view>
  </view>
</template>

<script>
// import {cinemaList,getCity} from "@/api/film.js"
import config from "@/utils/config.js";
import sheep from "@/sheep";
export default {
  data() {
    return {
      rateValue: 3,
      filmInfo: {},
      position: {},
      dataList: [],
      page: 1,
      originalData: [], //影院所有数据
      isPage: true,
      cityList: [],
      cityShowList: [],
      isLoad: false,
      show: false,
      keyWord: "",
      countyId: 0,
      countyList: [],
    };
  },
  onReachBottom() {
    if (this.isPage) {
      this.page++;
      this.getPageData();
    } else {
      this.$toast("没有更多了");
    }
  },
  onLoad(option) {
    const query = JSON.parse(decodeURIComponent(option.params));
    console.log("option", option);
    console.log("query", query);
    let _this = this;
    // const eventChannel = this.getOpenerEventChannel();
    _this.filmInfo = query.info;
    _this.position = query.position;
    _this.getCinemaList(_this.position.id);
    this.getCounty();
  },

  onShow() {
    // _this.position = query.position
    this.position = uni.getStorageSync("map");
    this.getCounty();
  },
  methods: {
    changeCounty(e) {
      console.log(e);
      if (e) {
        this.getCinemaList(e);
      } else {
        this.getCinemaList();
      }
    },
    // 获取县区
    async getCounty() {
      this.countyList = [];
      const countyList = await sheep.$api.movie.getCityList({
        cityId: this.position.id,
      });
      this.countyList.push({
        value: 0,
        text: "全城",
      });
      countyList.map((item) => {
        item.value = item.id;
        item.text = item.districtName;
        this.countyList.push(item);
      });
    },
    goBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    async getCinemaList(id) {
      const res = await sheep.$api.movie.cinemaList({
        areaId: id,
      });
      if (res.state === 200) {
        this.dataList = res.data.list;
        this.dataList.push();
      }
      console.log("res", res);
    },
    getDataUrl(data) {
      console.log(data, "id值");
      uni.navigateTo({
        url:
          "/pages/movie/choice-movie?movie=" +
          encodeURIComponent(JSON.stringify(this.filmInfo)) +
          "&item=" +
          encodeURIComponent(JSON.stringify(data)) +
          `&id=${data.id}` +
          `&cityid=${this.position.id}` +
          `&filmName=${this.filmInfo.filmName}`,
      });
    },
    select_city() {
      uni.navigateTo({
        url: "/pages/movie/address_city",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.cinema-top {
  background-color: #636775;
  padding: 32rpx;
  padding-top: 120rpx;

  // position: relative;
  .tops-item {
    display: flex;
    align-items: center;
    z-index: 9999;
  }

  .btins {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    // z-index: 99;
    filter: blur(15px);
    -webkit-filter: blur(15px);
  }

  .cinema-img {
    width: 180rpx;
    height: 248rpx;

    image {
      width: 180rpx;
      height: 248rpx;
      border-radius: 20rpx;
    }
  }

  .cinema-info {
    margin-left: 30rpx;

    .cinema-info-top {
      display: flex;
      align-items: center;

      .top-name {
        color: #ffffff;
        font-size: 32rpx;
        font-weight: 600;
      }

      .top-type {
        background-color: #7b7b7b;
        border-radius: 6rpx;
        padding: 2rpx 8rpx;
        color: #ffffff;
        font-size: 17rpx;
        margin-left: 30rpx;
      }
    }

    .rate-item {
      display: flex;
      align-items: center;
      margin-top: 16rpx;

      .rate-nun {
        color: #ff6e06;
        font-size: 28rpx;
        font-weight: 550;
        margin-left: 16rpx;
      }
    }
  }
}

.list-type {
  color: #ffffff;
  font-size: 24rpx;
  margin-top: 12rpx;

  text {
    color: #ff6e06;
    font-size: 550;
    margin-right: 8rpx;
  }
}

.cinema-down {
  display: flex;
  align-items: center;
  padding: 22rpx 32rpx;
  border-bottom: 2rpx solid #dfe0e2;

  .down-city {
    display: flex;
    align-items: center;

    text {
      color: #636775;
      font-size: 28rpx;
    }

    image {
      width: 24rpx;
      height: 24rpx;
      margin-left: 8rpx;
    }
  }

  .serchs {
    margin-left: auto;
    width: 44rpx;
    height: 44rpx;
  }
}

.cinema-list {
  margin: 0rpx 32rpx;
  border-bottom: 2rpx solid #dfe0e2;
  padding: 32rpx 0rpx 40rpx 0rpx;

  .cinema-name {
    color: #2d3039;
    font-size: 32rpx;
    font-weight: 550;
  }

  .cinema-address-item {
    display: flex;
    justify-content: space-between;
    margin-top: 10rpx;

    .address-text {
      color: #636775;
      font-size: 24rpx;
      width: 78%;
    }

    .distance {
      color: #636775;
      font-size: 28rpx;
    }
  }
}

.sessions {
  color: #636775;
  font-size: 24rpx;
  margin-top: 24rpx;
}

.region-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 20rpx;

  .region-left {
    width: 75%;
    border-radius: 40rpx;
    height: 68rpx;
    background-color: #f5f6f8;
    display: flex;
    align-items: center;
    padding-left: 30rpx;
  }

  .region-val {
    width: 90%;
    font-size: 30rpx;
  }

  .region-btn {
    background: linear-gradient(207deg, #ff9272 0%, #fc5421 100%);
    border-radius: 50rpx;
    height: 68rpx;
    text-align: center;
    width: 140rpx;
    line-height: 68rpx;
    color: #ffffff;
    font-size: 24rpx;
    font-weight: 550;
  }
}

.region-list {
  padding: 22rpx 35rpx;
  color: #2d3039;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2rpx solid #e2e2e2;
}

.empty {
  text-align: center;
  padding-top: 30rpx;
  color: #787a82;
  font-size: 24rpx;
}
</style>
